<template>
  <el-drawer
    v-model="open"
    title="评价详情"
    :with-header="true"
    size="80%"
    class="comment-drawer"
    :close-on-click-modal="false"
    :before-close="closeW"
    :append-to-body="true"
  >
    <div
      v-for="item in result.tEvaluateScores"
      :key="item.lId"
      style="display: flex"
    >
      <span style="line-height: 40px">{{ item.labelName }}：</span>
      <el-rate
        v-model="item.score"
        size="large"
        show-score
        text-color="#ff9900"
        score-template="{value}分"
        clearable
        disabled
      />
    </div>
    <el-form :inline="true" label-width="auto">
      <el-col :span="24">
        <el-form-item label="评价："> {{ result.description }} </el-form-item>
      </el-col>
      <div
        v-for="(item, index) in result.fileList"
        :key="index"
        class="item-wrap"
      >
        <div class="item-box">
          <el-image
            v-if="item.type === 2"
            class="rongqi"
            :src="item.src"
            :preview-src-list="[item.src]"
          >
          </el-image>
          <audio controls id="videoDiv" v-else-if="item.type === 1">
            <source :src="item.src" type="audio/ogg" />
          </audio>
          <video
            v-else-if="item.type === 3"
            class="rongqi"
            :src="item.src"
            controls
            :id="item.uid"
            @click="videoBtn(item.uid)"
          ></video>
        </div>
      </div>
    </el-form>
  </el-drawer>
</template>

<script setup>
import { getEvaluateDetailAPI } from "@/api/interaction/comment";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const open = ref(false);

const currentItem = ref({});
const result = ref({
  description: null,
  tEvaluateScores: [],
  fileList: [],
});

function openW(row) {
  reset();
  currentItem.value = row;
  open.value = true;
  nextTick(() => {
    initPage();
  });
}

function closeW() {
  reset();
  open.value = false;
}

function reset() {
  result.value = { description: null, tEvaluateScores: [], fileList: [] };
}

function videoBtn(uid) {
  const video = document.getElementById(uid);
  video.webkitRequestFullScreen();
}

function initPage() {
  loading.value = true;
  getEvaluateDetailAPI({ id: currentItem.value.id })
    .then((response) => {
      loading.value = false;
      let temp = response.data;
      let tempList = temp.link ? temp.link.split(",") : [];

      let fileList = [];
      tempList.forEach((element, index) => {
        let file = {};
        file.src = element;
        file.uid = index;
        let fileExtension = element.slice(element.lastIndexOf(".") + 1);
        if (".jpg,.jpeg,.png".includes(fileExtension)) {
          file.type = 2;
        } else if (".mp3,.m4a".includes(fileExtension)) {
          file.type = 1;
        } else if (".mp4".includes(fileExtension)) {
          file.type = 3;
        } else {
          file.type = null;
        }
        fileList.push(file);
      });

      temp.fileList = fileList;
      result.value = temp;

      // .....
    })
    .catch(() => {
      loading.value = false;
    });
}

defineExpose({ openW }); // 用于父组件调用
</script>

<style lang="scss" scoped>
.item-wrap {
  position: relative;
  width: 96.5%;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
  .item-box {
    display: flex;

    .rongqi {
      object-fit: cover;
      position: relative;
      min-width: 180px;
      height: 180px;
      margin-right: 12px;
      border-radius: 4px;
      box-sizing: border-box;
    }
    // .xm-audio {
    //   display: flex;
    //   align-items: center;
    //   width: 360px;
    //   height: 60px;
    //   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
    //   border-radius: 4px;
    //   padding: 8px !important;
    //   background-color: #fff;
    //   .audio-cover {
    //     width: 44px;
    //     height: 44px;
    //   }
    //   .progress-bar {
    //     width: 240px;
    //     height: 50px;
    //     margin-left: 8px;
    //     display: flex;
    //     flex-direction: column;
    //     justify-content: space-around;
    //   }
    //   .audio_image {
    //     width: 28px !important;
    //     height: 28px;
    //     position: relative;
    //     right: -10px;
    //   }
    // }
  }

  .control {
    position: absolute;
    top: 4px;
    right: -20px;
    width: 20px;
  }
}
</style>
